<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三级目录菜单</title>
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 自定义样式 -->
  <link rel="stylesheet" href="menu.css">
</head>
<body class="bg-gray-50">
  <div class="containers mx-auto">
    <!-- 职业类型选择 -->
    <div id="professionContainer" class="px-2 mb-2 overflow-x-auto">
      <div class="flex space-x-2 min-w-max">
        <!-- 职业类型Tab项将动态插入这里 -->
      </div>
    </div>

    <!-- 三级目录容器 -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
      <!-- 第一级：横向Tab -->
      <div id="level1Container" class="bg-blue-50 pt-2 px-2 overflow-x-auto smooth-scroll">
        <div class="flex space-x-2 min-w-max pb-2">
          <!-- 第一级Tab项将动态插入这里 -->
        </div>
      </div>

      <!-- 第二级和第三级容器（圣杯布局） -->
      <div class="flex bg-white overflow-hidden h-[60vh] directory-container">
        <!-- 第二级：纵向Tab（左侧） -->
        <div id="level2Container" class="w-48 md:w-48 h-full overflow-y-auto bg-gray-100 mr-2 smooth-scroll">
          <!-- 第二级Tab项将动态插入这里 -->
        </div>

        <!-- 第三级和内容区（右侧） -->
        <div class="flex-1 h-full overflow-hidden bg-white flex-col">
          <!-- 第三级：横向Tab（右上） -->
          <div id="level3Container" class="overflow-x-auto smooth-scroll border-b border-gray-200">
            <div class="flex space-x-2 p-2 min-w-max">
              <!-- 第三级Tab项将动态插入这里 -->
            </div>
          </div>

          <!-- 内容展示区（右下） -->
          <div id="contentArea" class="max-h-[80%] box-border overflow-y-auto p-4 flex-1">
            <div class="text-center text-gray-500 py-8">
              请选择三级目录项查看内容
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载提示 -->
    <div id="loadingIndicator" class="hidden fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-lg p-6">
        <div class="text-center">
          <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mb-2"></div>
          <p class="text-gray-600">加载中...</p>
        </div>
      </div>
    </div>

    <!-- 选中人物列表和操作按钮（底部固定） -->
    <div id="selectedNursesContainer" class="selected-nurses-container">
      <div class="mb-2">
        <span class="text-sm font-semibold text-gray-700">已选中人物：</span>
      </div>
      <div id="selectedNursesList">
        <!-- 选中的人物项将动态插入这里 -->
      </div>
      
      <!-- 操作按钮 -->
      <div class="mt-4 pt-4 border-t border-gray-200 flex gap-3 justify-end">
        <button id="cancelBtn" class="action-btn cancel-btn flex-1 md:flex-none">
          取消
        </button>
        <button id="confirmBtn" class="action-btn confirm-btn flex-1 md:flex-none">
          确定
        </button>
      </div>
    </div>

  </div>

  <!-- JavaScript 模块 -->
  <script type="module" src="js/app.js"></script>
</body>
</html>

